<template>
    <div class="service">
        <div v-if="list.length>0">
            <div v-for="(item, key) in list" :key="key">
                <div class="video-box">
                    <video :src="getImageUrl(item.videoUrl)" controls width="100%" :poster="getImageUrl(item.coverTheAddress)" webkit-playsinline="true" playsinline="" x5-playsinline="true" x-webkit-airplay="true" controls="controls"></video>
                </div>
                <div class="video-intro">
	                <h3 class="video-name">{{item.videoName}}</h3>
	                <div class="intro">{{item.particular}}</div>
                </div>
            </div>
        </div>
        <div class="empty" v-else>空空如也</div>
    </div>
</template>
<script>
import {
    getVideoList
} from '@/api/index'
export default {
    data() {
        return {
            videoCategoryId: null,
            list: [{}]
        }
    },
    created() {
        this.videoCategoryId = this.$route.query.videoCategoryId
        getVideoList({
            videoCategoryId: this.videoCategoryId
        }).then(res => {
            this.list = res
            console.log(this.list)
        })
    }
}

</script>
<style scoped>
.service {
    padding: 10vw 5vw;
}
.video-intro{
	text-align: center;
	padding: 4vw 0;
}
.video-name{
	margin: 0;
}
.intro{
	line-height: 2;
}
</style>
